<template>
  <view class="container">
    <view class="header">
      <text class="title">积分等级称号</text>
      <text class="subtitle">了解积分等级和对应称号</text>
    </view>
    
    <Card class="current-level-card">
      <view class="level-header">
        <view class="level-info">
          <text class="level-number">Lv.{{ currentLevel.level }}</text>
          <text class="level-title">{{ currentLevel.title }}</text>
        </view>
        <view class="points-info">
          <text class="points-text">{{ currentLevel.points }}分</text>
        </view>
      </view>
      
      <view class="level-progress">
        <view class="progress-label">
          <text>距离下一级</text>
          <text>{{ currentLevel.nextPoints }}分</text>
        </view>
        <view class="progress-bar">
          <view class="progress-fill" :style="{ width: currentLevel.progress + '%' }"></view>
        </view>
      </view>
    </Card>
    
    <view class="levels-list">
      <Card 
        v-for="(level, index) in levels" 
        :key="index" 
        class="level-card"
        :class="level.level === currentLevel.level ? 'current' : ''"
      >
        <view class="level-item">
          <view class="level-badge">
            <text class="level-number">Lv.{{ level.level }}</text>
          </view>
          <view class="level-details">
            <text class="level-title">{{ level.title }}</text>
            <text class="level-range">{{ level.minPoints }} - {{ level.maxPoints }}分</text>
          </view>
        </view>
      </Card>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentLevel: {
        level: 2,
        title: '学习小能手',
        points: 180,
        nextPoints: 20,
        progress: 80
      },
      levels: [
        {
          level: 1,
          title: '学习新手',
          minPoints: 0,
          maxPoints: 99
        },
        {
          level: 2,
          title: '学习小能手',
          minPoints: 100,
          maxPoints: 199
        },
        {
          level: 3,
          title: '学习达人',
          minPoints: 200,
          maxPoints: 299
        },
        {
          level: 4,
          title: '学霸',
          minPoints: 300,
          maxPoints: 399
        },
        {
          level: 5,
          title: '学神',
          minPoints: 400,
          maxPoints: 9999
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: $spacing-base;
  background-color: $background-color;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: $spacing-lg;
  padding: $spacing-xl 0;
}

.title {
  font-size: $font-size-xl;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-sm;
}

.subtitle {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.current-level-card {
  margin-bottom: $spacing-base;
}

.level-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-lg;
}

.level-info {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.level-number {
  font-size: 48rpx;
  font-weight: bold;
  color: $primary-color;
  margin-right: $spacing-base;
}

.level-title {
  font-size: $font-size-lg;
  font-weight: bold;
  color: $text-primary;
}

.points-info {
  text-align: right;
}

.points-text {
  font-size: $font-size-base;
  color: $text-secondary;
}

.level-progress {
  margin-top: $spacing-lg;
}

.progress-label {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: $font-size-sm;
  color: $text-secondary;
  margin-bottom: $spacing-sm;
}

.progress-bar {
  width: 100%;
  height: 20rpx;
  background-color: $background-color;
  border-radius: 10rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: $primary-color;
  border-radius: 10rpx;
}

.levels-list {
  margin-bottom: $spacing-lg;
}

.level-card {
  margin-bottom: $spacing-sm;
  transition: all 0.3s;
  
  &.current {
    border: 2rpx solid $primary-color;
    background-color: rgba($primary-color, 0.05);
  }
}

.level-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.level-badge {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: $primary-color;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: $spacing-base;
}

.level-number {
  font-size: $font-size-sm;
  font-weight: bold;
  color: #fff;
}

.level-details {
  flex: 1;
}

.level-title {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-xs;
}

.level-range {
  font-size: $font-size-sm;
  color: $text-secondary;
}
</style>